<template>
    <div class="header">
      <el-row>
          <div class="system-info">
            <img class="logo" src="@/assets/logo.png">
            <span class="title">ai-xue</span>
          </div>
          <div class="system-navigation">
           <ul>
             <li>简介</li>
             <li>作品</li>
             <li>事迹</li>
             <li>关于</li>
             <li>联系我们</li>
           </ul>
          </div>

        <div class="system-login">
          <ul>
            <li>登录</li>
            <li>注册</li>
          </ul>
        </div>
      </el-row>
    </div>
</template>

<script>
    export default {
        name: "header1",
        methods:{
            login:function () {
                this.$router.push("/login");
            }
        },
            // sign:function () {
            //     this.$router.push("/register");
            // },
    }
</script>

<style scoped>
  .header {
    /*position: fixed;*/
    width: 100%;
    background: #495060;
    line-height: 64px;
    height: 64px;
    /*top: 0;*/
    /*left: 0;*/
    /*z-index: 99;*/
  }
  .header   .system-info {
    /*text-align: left;*/
  }
  .header   .system-info    .logo {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    margin-top: 12px;
    margin-left: 60px;
    margin-right: 10px;
    float: left;
    /*position: fixed;*/
  }
  .header   .system-info   .title {
    font-size: 20px;
    font-weight: bold;
    color: azure;
    line-height: 64px;
  }

  .system-navigation {
    text-align: center;
    float: left;
    margin-left: 400px;
    margin-top: -65px
  }
  .system-navigation ul{
      list-style-type: none;
      padding: 0;
      margin-left: 300px;
      margin-top: -55px;
  }
  .system-navigation  li{
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  .system-login {
    text-align: center;
    float: right;
    margin-right: 80px;
    margin-top: -65px

  }
  .system-login ul{
      clear: both;
      list-style-type: none;
      padding: 0;
      margin-right: 60px;
  }
  .system-login li{
      float: right;
      display: block;
      color: white;
      text-align: center;
      padding: 15px 14px;
      text-decoration: none;
      margin-left: 5px;
      margin-top: -50px;
  }

</style>
